<!--
 * @Description: 局级安全生产首页
 * @Author: Huang Junjie
 * @Date: 2021-06-01 11:16:48
 * @LastEditTime: 2021-10-14 10:49:01
 * @LastEditors: Liu Zhiwang
-->
<template>
  <div>
    <!-- 背景图 -->
    <div
      id="background"
      :style="`background-image: url(${require('@/assets/images/jjxt/production-safety/bureau-level-home/bureau-level-bg.png')})`"
    />
    <!-- 背景图 -->

    <!-- 顶部导航栏 -->
    <top-navigation-bar active-item="/bureau-level-home" />
    <!-- 顶部导航栏 -->

    <!-- 页面内容 -->
    <div class="content">
      <div class="inner-content-left">
        <!-- 数据卡片组件 -->
        <data-card class="data-card-style" />
        <!-- 数据卡片组件 -->

        <!-- 月度跳闸统计组件 -->
        <monthly-trip-statistics class="monthly-trip-statistics-style" />
        <!-- 月度跳闸统计组件 -->
      </div>
      <div class="inner-content-middle">
        <!-- 当月检测公里数统计组件 -->
        <power-supply-saves-cost-expenditure class="power-supply-saves-cost-expenditure-style" />
        <!-- 当月检测公里数统计组件 -->

        <!-- 接触网检测进度统计组件 -->
        <catenary-detection-progress-statistics class="catenary-detection-progress-statistics-style" />
        <!-- 接触网检测进度统计组件 -->
      </div>
      <div class="inner-content-right">
        <!-- 应用卡片列表组件 -->
        <app-card-list class="app-card-list-style" />
        <!-- 应用卡片列表组件 -->

        <!-- 当月检测缺陷数统计组件 -->
        <monthly-statistics-of-detection-of-defects class="monthly-statistics-of-detection-of-defects-style" />
        <!-- 当月检测缺陷数统计组件 -->

        <!-- 当月远动缺陷统计组件 -->
        <monthly-statistics-of-telecontrol-defects class="monthly-statistics-of-telecontrol-defects-style" />
        <!-- 当月远动缺陷统计组件 -->
      </div>
    </div>
  </div>
</template>

<script>
import '@/styles/jjxt/index.css';
import TopNavigationBar from '@/views/jjxt/components/TopNavigationBar';
import DataCard from './components/DataCard';
import CatenaryDetectionProgressStatistics from './components/CatenaryDetectionProgressStatistics/index.vue';
import PowerSupplySavesCostExpenditure from './components/PowerSupplySavesCostExpenditure';
import MonthlyTripStatistics from './components/MonthlyTripStatistics';
import AppCardList from '../components/AppCardList';
import MonthlyStatisticsOfDetectionOfDefects from './components/MonthlyStatisticsOfDetectionOfDefects';
import MonthlyStatisticsOfTelecontrolDefects from './components/MonthlyStatisticsOfTelecontrolDefects';

export default {
  name: 'BureauLeveHome',
  components: {
    TopNavigationBar,
    DataCard,
    CatenaryDetectionProgressStatistics,
    PowerSupplySavesCostExpenditure,
    MonthlyTripStatistics,
    AppCardList,
    MonthlyStatisticsOfDetectionOfDefects,
    MonthlyStatisticsOfTelecontrolDefects
  },
  data() {
    return {

    };
  },
  activated() {

  },
  methods: {

  }
};
</script>

<style lang="scss" scoped>
#background {
  background-color: #071742;
  background-size: 100% 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}

.content {
  width: 100%;
  height: 100%;
  display: flex;
  .inner-content-left {
    position: absolute;
    top: 88px;
    left: 20px;
    bottom: 20px;
    .data-card-style {
      // height: 45%;
      height: 360px;
    }
    .monthly-trip-statistics-style {
      position: absolute;
      top: 374px;
      bottom: 0;
    }
    // .catenary-detection-progress-statistics-style {
    //   position: absolute;
    //   top: 374px;
    //   bottom: 0;
    // }
  }
  .inner-content-middle {
    position: absolute;
    top: 88px;
    left: 494px;
    bottom: 20px;
    .power-supply-saves-cost-expenditure-style {
      position: absolute;
      top: 0;
    }
    .catenary-detection-progress-statistics-style {
      position: absolute;
      bottom: 0;
    }
    // .monthly-trip-statistics-style {
    //   position: absolute;
    //   bottom: 0;
    // }
  }
  .inner-content-right {
    position: absolute;
    top: 88px;
    left: 1442px;
    bottom: 20px;
    .app-card-list-style {
      position: absolute;
      top: 0;
      bottom: 618px;
    }
    .monthly-statistics-of-detection-of-defects-style {
      position: absolute;
      bottom: 270px;
    }
    .monthly-statistics-of-telecontrol-defects-style {
      position: absolute;
      bottom: 0;
    }
  }
}
</style>
